<template>
    <view class="box-card">
        <view class="box-card-list" v-for="(item,index) in invoice_list" :key="index">
            <view class="box-card-list-1">
                <view class="box-card-list-info">
                    <view class="name">{{item.inv_title}}</view>
                    <!-- <view class="status">¥2000.00</view> -->
                </view>
                <view class="type">{{item.inv_type==2?'普通发票':'增值税电子普通发票'}}</view>
                <view class="box-card-list-but">
                    <view class="del" @click="del(item)"><image :src="`${picUrl}/jh-1/del.png`"></image>删除</view>
                    <view class="edit" @click="edit(item)"><image :src="`${picUrl}/jh-1/edit.png`"></image>编辑</view>
                </view>
            </view>
        </view>
        <o-empty bg="#f5f5f5" v-if="invoice_list.length==0"></o-empty>
        <view class="footer">
            <view class="footer-but" @click="add_invoice"><image :src="`${picUrl}/jh-1/add.png`"></image>新增发票</view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                activeIndex: 0,
                invoice_list:[],
                page: 1,
                hasNext:true,
            }
        },
        onShow(){
            this.get_invoice_list();
        },
        onReachBottom() {
        	if (this.hasNext) {
        	    this.page++;
        	    this.get_invoice_list();
        	}
        },
        methods: {
            tabChange(index){
                this.activeIndex=index;
                this.get_invoice_list();
            },
            add_invoice(){
                uni.navigateTo({
                    url:'/member/invoice/invoiceSet'
                })
            },
            del(item){
                let that = this;
                this.$util.request({
                    url: '/mobile/index.php?act=member_invoice&op=invoice_del',
                    method: 'post',
                    data: {
                        inv_id:item.inv_id,
                    },
                }).then(function(res) {
                    if (res.error_code == 0) {
                        uni.showToast({
                        	title:"删除发票成功!",
                        	icon:"none"
                        })
                        uni.navigateBack({
                            delta:1
                        })
                    }else{
                        uni.showToast({
                        	title:res.message,
                        	icon:"none"
                        })
                    }
                })
            },
            edit(item){
                let that = this;
                this.$util.request({
                    url: '/mobile/index.php?act=member_invoice&op=invoice_del',
                    method: 'post',
                    data: {
                        inv_id:item.inv_id,
                    },
                }).then(function(res) {
                    if (res.error_code == 0) {
                        uni.showToast({
                        	title:"删除发票成功!",
                        	icon:"none"
                        })
                        uni.navigateBack({
                            delta:1
                        })
                    }else{
                        uni.showToast({
                        	title:res.message,
                        	icon:"none"
                        })
                    }
                })
            },
            get_invoice_list(){
                let that = this;
                this.$util.request({
                    url: '/mobile/index.php?act=member_invoice&op=invoice_list',
                    method: 'get',
                    data: {
                        curpage:that.page,
                    },
                }).then(function(res) {
                    that.hasNext=res.datas.paged.hasmore;
                    if(that.page==1){
                        that.invoice_list=res.datas.invoice_list;
                    }else{
                        that.invoice_list=that.invoice_list.concat(res.datas.invoice_list);
                    }
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .box-card {
        padding-bottom: 124rpx;
        padding-top:30rpx;
        .box-card-tab {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: #FFF;
            padding: 24rpx 175rpx;
            .box-card-tab-1 {
                font-size: 28rpx;
                font-family: PingFang SC-Regular, PingFang SC;
                font-weight: 400;
                color: #333333;
            }

            .box-card-tab-1-active {
                font-size: 28rpx;
                font-family: PingFang SC-Medium, PingFang SC;
                font-weight: 500;
                color: #E96A1D;
                position: relative;
            }

            .box-card-tab-1-active::after {
                position: absolute;
                bottom: -4rpx;
                left: 30%;
                right: 30%;
                height: 2rpx;
                content: '';
                background: #E96A1D;
                border-radius: 6rpx;
            }
        }

        .box-card-list {
            background-color: #FFF;
            margin:0 30rpx 30rpx;
            .box-card-list-1 {
                padding: 30rpx 30rpx 18rpx;

                .box-card-list-info {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    .name {
                        font-size: 32rpx;
                        font-family: PingFang SC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #323232;
                    }

                    .status {
                        font-size: 28rpx;
                        font-family: PingFang SC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #E96A1D;
                    }
                    .status2 {
                        font-size: 28rpx;
                        font-family: PingFang SC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #323232;
                    }
                }

                .type {
                    font-size: 26rpx;
                    font-family: PingFang SC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #909090;
                    padding-bottom: 20rpx;
                }

                .money {
                    font-size: 28rpx;
                    font-family: PingFang SC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #E96A1D;
                    text-align: right;
                    margin-top: 20rpx;
                }
                
                .box-card-list-but {
                    border-top: 2rpx solid #EEEEEE;
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;
                    padding-top: 20rpx;
                    .del{
                        width: 140rpx;
                        height: 60rpx;
                        background: #F7F7F7;
                        border-radius: 50rpx 50rpx 50rpx 50rpx;
                        opacity: 1;
                        
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        
                        font-size: 28rpx;
                        font-family: PingFang SC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #909090;
                        margin-right: 10rpx;
                        
                        image{
                            width: 40rpx;
                            height: 40rpx;
                        }
                    }
                    .edit{
                        width: 140rpx;
                        height: 60rpx;
                        background: #F7F7F7;
                        border-radius: 50rpx 50rpx 50rpx 50rpx;
                        opacity: 1;
                        
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        
                        font-size: 28rpx;
                        font-family: PingFang SC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #323232;
                        margin-left: 20rpx;
                        
                        image{
                            width: 40rpx;
                            height: 40rpx;
                            margin-right: 10rpx;
                        }
                    }
                }
            }
        }
        .footer{
            position: fixed;
            left: 0;
            right: 0;
            bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
            bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
            padding: 0 55rpx 36rpx;
            background-color: #FFF;
            .footer-but{
                height: 88rpx;
                background: linear-gradient(138deg, #EA8C1E 0%, #E84A1D 100%);
                border-radius: 50rpx 50rpx 50rpx 50rpx;
                opacity: 1;
                
                font-size: 34rpx;
                font-family: PingFang SC-Regular, PingFang SC;
                font-weight: 400;
                color: #FFFFFF;
                
                display: flex;
                align-items: center;
                justify-content: center;
                image{
                    width: 40rpx;
                    height: 40rpx;
                    margin-right: 10rpx;
                }
            }
        }
    }
</style>